import {
    Component, Input, Output, ElementRef, Renderer2, EventEmitter, OnInit, OnChanges,
    SimpleChanges
} from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageService } from '@services/message.service';

@Component({
    selector: 'alarm-tab',
    templateUrl: 'alarm-tab.html',
    styleUrls: ['alarm-tab.scss']
})
export class AlarmTabComponent implements OnInit, OnChanges {
    @Input() functionList;
    @Input() state;
    @Output() changeAlarmTab: EventEmitter<any> = new EventEmitter();
    subscription: Subscription;
    current: string;
    funcList;
    constructor(private el: ElementRef, private renderer: Renderer2, private messageService: MessageService) {
    }


    ngOnInit() {
        this.funcList = this.functionList;
        this.current = this.funcList.length > 0 ? this.funcList[0].functionCode : null; // 默认第一个页面
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes && changes.state) {
            console.log(changes);
            this.current = changes.state.currentValue;
            console.log(this.current);
        }
        if (this.current === 'alarm') {
            this.run(0, true);
        }
        this.subscription = this.messageService.getMessage().subscribe(data => {
            if (data.id === 'projectChange' && data.data) {
                this.funcList = this.functionList;
                this.current = this.funcList.length > 0 ? this.funcList[0].functionCode : null; // 默认第一个页面
                this.run(0);
            }
        });
    }

    run(index, state?) {
        const obj = this.el.nativeElement.querySelector('.alarm_tip_line');
        if (obj) {
            this.renderer.setStyle(obj, 'transform', 'translateX(' + (index * obj.offsetWidth) + 'px)');
            if (state) {
                this.renderer.setStyle(obj, 'transition', 'transform 0s');
            } else {
                this.renderer.setStyle(obj, 'transition', 'transform 0.6s');
            }
        }
    }



    tip_line_run = function (type, index) {
        // 确定当前显示页面
        this.current = type;
        // 移动
        this.run(index);
        // 面板显示
        this.changeAlarmTab.emit(type);
    };

}
